/**
* @作者:邹蕴果
* @创建时间：2021/7/12
* @修改时间：2021/7/16
*/

<template>
	<view class="main">
		<!-- 头部导航 -->
		<view class="header">
			<view class="name">享租</view>
			<view class="navitems">
				<view class="navitem">厂商登录</view>
				<view class="navitem">管理员登录</view>
			</view>
		</view>
		<view class="body">
			<view class="text">用户注册</view>
			<view class="sides">
				<!-- 手机注册 -->

				<el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
					<el-tab-pane label="手机注册" name="first" class="subtab">
						<view class="imgrow">
							<view class="rowtext">头像:</view>
							<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"
								:on-change="changeImg" :show-file-list="false" :before-upload="beforeAvatarUpload">
								<image v-if="imageUrl" :src="imageUrl" mode="aspectFill" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</view>
						<view class="inputrow">
							<view class="rowtext">昵称:</view>
							<el-input inputBox v-model="nickName"></el-input>
						</view>
						<view class="inputrow">
							<view class="rowtext">手机号:</view>
							<el-input class="inputBox" v-model="PhoneNumber"></el-input>
						</view>
						
						<view class="inputrow">
							<view class="rowtext">密码:</view>
							<el-input inputBox v-model="password" show-password></el-input>
						</view>
						<el-button type="primary" class="submitButton" @click="submit(1)">立即注册</el-button>

					</el-tab-pane>
					<!-- 邮箱注册 -->
					<el-tab-pane label="邮箱注册" name="second" class="subtab">
						<view class="imgrow">
							<view class="rowtext">头像:</view>
							<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"
								:on-change="changeImg" :show-file-list="false" :before-upload="beforeAvatarUpload">
								<image v-if="imageUrl" :src="imageUrl" mode="aspectFill" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>

							</el-upload>
						</view>
						<view class="inputrow">
							<view class="rowtext">昵称:</view>
							<el-input inputBox v-model="nickName"></el-input>
						</view>
						<view class="inputrow">
							<view class="rowtext">邮箱:</view>
							<el-input class="inputBox" v-model="MailAddress"></el-input>
						</view>
						
						<view class="inputrow">
							<view class="rowtext">密码:</view>
							<el-input inputBox v-model="password" show-password></el-input>
						</view>
						<el-button type="primary" class="submitButton" @click="submit(2)">立即注册</el-button>

					</el-tab-pane>

				</el-tabs>
				<image src="../../static/image/register.png" class="staticimg"></image>
			</view>


		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				nickName: '',
				PhoneNumber: 0,
				MailAddress: '',
				veriCode: '',
				password: '',
				show: true,
				imageUrl: '',
				activeName: 'second',
				releUrl: '',
			};
		},
		methods: {
			changeImg(file) {
				this.imageUrl = file.url
			},
			//头像上传处理函数

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			//注册提交
			submit(sender) {
				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
				//手机注册
				if (sender == 1) {
					//手机号码正则检验
					if (regMobile.test(this.PhoneNumber)) {
						this.$confirm('确认要提交注册信息?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							//提交信息
							uni.uploadFile({
								url: 'http://47.96.168.135:7388/Customer/RegisterWithFaceImage', //仅为示例，非真实的接口地址
								filePath: this.imageUrl,
								name: 'face',
								formData: {

									name: this.nickName,
									passWord: this.$md5(this.password),
									phoneNum: this.PhoneNumber,



								},
								//提交回调函数
								success: (uploadFileRes) => {
									var b = uploadFileRes.data.slice(10, 12)


									if (b == 14) {
										this.$alert('昵称已经被注册', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 15) {
										this.$alert('手机号已经被注册', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 16) {
										this.$alert('邮箱号已被注册', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 17) {
										this.$alert('店铺名已存在', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 18) {
										this.$alert('身份证号已注册', '警告', {
											confirmButtonText: '确定',

										});

									} else {
										this.$message({
											type: 'success',
											message: '注册成功!'
										})

										setTimeout(uni.redirectTo({
											url: "UserLoginIndex"
										}), 1000)
									}

								}
							});

						})

					} else {
						this.$alert('手机号不合法', '警告', {
							confirmButtonText: '确定',

						});
					}
					//邮箱注册
				} else if (sender == 2) {
					if (regEmail.test(this.MailAddress)) {
						this.$confirm('确认要提交注册信息?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							uni.uploadFile({
								url: 'http://47.96.168.135:7388/Customer/RegisterWithFaceImage', //仅为示例，非真实的接口地址
								filePath: this.imageUrl,
								name: 'face',
								formData: {


									"email": this.MailAddress,
									"name": this.nickName,
									"passWord": this.$md5(this.password),



								},
								//注册回调函数
								success: (uploadFileRes) => {
									var b = uploadFileRes.data.slice(10, 12)



									if (b == 14) {
										this.$alert('昵称已经被注册', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 15) {
										this.$alert('手机号已经被注册', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 16) {
										this.$alert('邮箱号已被注册', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 17) {
										this.$alert('店铺名已存在', '警告', {
											confirmButtonText: '确定',

										});

									} else if (b == 18) {
										this.$alert('身份证号已注册', '警告', {
											confirmButtonText: '确定',

										});

									} else {
										this.$message({
											type: 'success',
											message: '注册成功!'
										})

										setTimeout(uni.redirectTo({
											url: "UserLoginIndex"
										}), 1000)
									}


								}
							});
						})

					} else {
						this.$alert('邮箱号不合法', '警告', {
							confirmButtonText: '确定',

						});
					}
				}

			},
			//由于发送验证码需要企业团体认证，因此该功能取消，不过前端显示的方法已经写好
			/* getCodeByEmail() {
				if (this.MailAddress != '') {
					//axios请求


					// 验证码倒计时
					if (!this.timer) {
						this.count = 60;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= 60) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				} else {
					this.$alert('请输入邮箱', '警告', {
						confirmButtonText: '确定',

					});
				}
			},

			getCodeByPhone() {

				if (this.PhoneNumber != 0) {
					//axios请求
					console.log(this.PhoneNumber)

					// 验证码倒计时
					if (!this.timer) {
						this.count = 60;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= 60) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				} else {
					this.$alert('请输入手机号', '警告', {
						confirmButtonText: '确定',

					});
				}
			}, */
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	};
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
        height: 650rpx;
	}

	// 顶栏style
	.header {
		width: 100%;
		height: 90rpx;
		display: flex;
		background-color: white;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		border-bottom: 1px solid #888888;
	}

	.name {


		font-size: 50rpx;
		margin-right: 30%;
	}

	.sides {
		display: flex;
		flex-direction: row;
		height: 500rpx;
		width: 100%;
	}

	.navitems {
		display: flex;
		flex-direction: row;
		margin-left: 100rpx;
		transform: translateX(200rpx);


	}

	.selectimgButton {
		margin-top: 10%;
		margin-left: 10%;
	}

	.navitem {
		font-size: 20px;
		margin-left: 10rpx;
	}

	.body {

		display: flex;
		flex-direction: column;
		height: 500rpx;
		width: 100%;
	}

	.pager {}

	.staticimg {
		margin-top: 5%;
		margin-left: 2%;
		width: 45%;
		height: 700rpx;
	}

	.text {
		margin-left: 7%;
		font-size: 10rpx;
		float: left;
	}

	.tab {
		margin-left: 7%;
		width: 35%;
		height: 30rpx;
		font-size: 20rpx;

	}

	.subtab {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.imgrow {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;

	}

	.rowtext {
		font-size: 10rpx;
		width: 15%;
		margin-right: 5%;
	}

	.inputrow {
		width: 100%;
		height: 30rpx;
		margin-top: 10%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.inputBox {}

	.codeinput {
		margin-left: -2.5%;
	}

	.verificationCode {
		flex: 1;
	}

	.codeinput {
		width: 50%;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.submitButton {
		height: 70rpx;
		margin-top: 10%;
		margin-left: 20%;
		width: 66.57%;
		border-radius: 50rpx;

	}
</style>
